<template>
  <div class="userInfo-container">
    <el-main class="main">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span style="font-size: 14px">基本资料</span>
        </div>
        <el-form
          :model="userinfo"
          :rules="rules"
          ref="userinfoForm"
          label-width="100px"
          class="demo-userinfo"
        >
          <el-form-item label="登录名称" prop="username">
            <el-input v-model="userinfo.username" :disabled="true"></el-input>
          </el-form-item>
          <el-form-item label="用户昵称" prop="nickname">
            <el-input v-model="userinfo.nickname"></el-input>
          </el-form-item>
          <el-form-item label="用户邮箱" prop="email">
            <el-input v-model="userinfo.email"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm()">提交修改</el-button>
            <el-button @click="resetForm()">重置</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </el-main>
  </div>
</template>

<script>
import { updateUserinfoApi } from "@/api/user";
export default {
  name: "userInfo",

  data() {
    let validateNickname = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("用户昵称是必填项"));
      } else {
        // 非空字符校验校验---正则不熟
        const regNickname = /\s+/;
        if (
          this.userinfo.nickname != "" &&
          regNickname.test(this.userinfo.nickname)
        ) {
          return callback(new Error("昵称必须是1-10位的非空字符"));
        }
      }
    };
    let validateEmail = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("用户邮箱是必填项"));
      } else {
        const regEmail =
          /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
        if (this.userinfo.email != "" && !regEmail.test(this.userinfo.email)) {
          return callback(new Error("用户邮箱格式不正确"));
        }
      }
    };
    return {
      userinfo: {
        email: "",
        id: "",
        nickname: "",
        user_pic: "",
        username: "",
      },
      rules: {
        username: [
          // { required: true, message: "登录名称是必填项", trigger: "blur" },
        ],
        nickname: [
          {
            required: true,
            message: "用户昵称是必填项",
            trigger: ["change", "blur"],
          },
          {
            min: 1,
            max: 10,
            message: "昵称必须是1-10位的非空字符",
            trigger: "blur",
          },
          { validator: validateNickname, trigger: ["blur", "change"] },
        ],
        email: [
          { required: true, message: "用户邮箱是必填项", trigger: "change" },
          { validator: validateEmail, trigger: ["blur", "change"] },
        ],
      },
    };
  },
  created() {
    this.getInfo();
  },
  methods: {
    // 获取用户信息通过vuex的持久化
    getInfo() {
      this.userinfo = JSON.parse(localStorage.getItem("vuex")).userinfo || {
        email: "",
        id: "",
        nickname: "",
        user_pic: "",
        username: "",
      };
    },
    async submitForm() {
      const res = await updateUserinfoApi(this.userinfo);
      if (res.data.code === 0) {
        console.log("submitForm", res.data);
        this.$store.dispatch("getUserinfo").then((res) => {
          this.getInfo();
        });
        this.$message.success("修改用户信息成功！");
      }
    },
    resetForm() {
      this.$refs.userinfoForm.resetFields();
    },
  },
};
</script>

<style lang="less" scoped>
// @import url("../../style/main.less");
@import url("~@/style/main.less");

::v-deep .el-input__inner {
  width: 400px;
}
</style>